<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌单创建</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>歌单创建</legend>
        <div class="layui-field-box">
            <div class="layui-col-md6">
                <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图片</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <img class="layui-upload-img" id="ID-upload-demo-img" style="max-width: 200px; max-height: 200px; margin-bottom: 10px; border: 1px solid rgba(0,0,0,0.1);">
                                <button type="button" class="layui-btn" id="btnMusic">
                                    <i class="layui-icon layui-icon-upload"></i>上传图片
                                </button>
                            </div>
                            <!-- 隐藏字段存储图片地址 -->
                            <input type="hidden" id="coverImg" name="coverImg">
                        </div>
                    </div>
                    <!--表单控件项：歌单名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌单名:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="name" id="musicname" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入歌单名称">
                        </div>
                    </div>
                    <!--表单控件项：标签-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">标签:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="tags" id="tags"
                                   placeholder="多个标签之间使用逗号(,)分隔" lay-verify="required" lay-verType="tips"
                                   lay-reqText="请输入至少一个标签">
                        </div>
                    </div>
                    <!-- 提交按钮    -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit id="addMusic">确认添加</button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var upload = layui.upload;
        
        //文件上传组件初始化
        upload.render({
            elem: '#btnMusic',
            url: '/file/upload',
            done: function (resp) {
                //上传成功后显示图片
                $('#ID-upload-demo-img').attr('src', resp.data);
                //隐藏表单中存储图片地址的隐藏域
                $('#coverImg').val(resp.data);
                layer.msg('上传成功', {icon: 1});
            },
            error: function () {
                layer.msg('上传失败，请稍后重试', {icon: 2});
            }
        });
        
        //处理编辑模式
        var id = new URLSearchParams(window.location.search).get('id');
        if (id) {
            //编辑模式，加载歌单数据
            $.get('/musicList/details', {id: id}, function (resp) {
                if (resp.code === 0) {
                    var data = resp.data;
                    //填充表单数据
                    $('#musicname').val(data.name);
                    $('#tags').val(data.tags);
                    if (data.coverImg) {
                        $('#ID-upload-demo-img').attr('src', data.coverImg);
                    }
                    //添加隐藏字段存储ID
                    $('#formMusic').append('<input type="hidden" name="id" value="' + id + '"/>');
                    //修改标题
                    $('.layui-elem-field-title legend').text('歌单修改');
                    $('#addMusic').text('确认修改');
                } else {
                    layer.msg(resp.msg || '获取歌单信息失败', {icon: 2});
                }
            });
        }
        
        //表单提交事件
        $('#addMusic').click(function () {
            //获取表单数据
            var musicList = form.val('formMusic');
            
            //验证表单
            if (!musicList.name) {
                layer.msg('请输入歌单名称', {icon: 2});
                return;
            }
            if (!musicList.tags) {
                layer.msg('请输入歌单标签', {icon: 2});
                return;
            }
            
            //添加封面图字段（如果已上传）
            musicList.coverImg = $('#coverImg').val() || '';
            //设置创建者（这里可以根据实际登录用户设置）
            musicList.createBy = 'admin';
            
            //确定请求地址和方式
            var url = id ? '/musicList/update' : '/musicList/add';
            var type = id ? 'PUT' : 'POST';
            
            //发送请求
            $.ajax({
                type: type,
                url: url,
                data: JSON.stringify(musicList),
                contentType: 'application/json;charset=utf-8',
                success: function (resp) {
                    if (resp.code === 0) {
                        layer.msg(resp.msg || (id ? '修改成功' : '添加成功'), {icon: 1});
                        setTimeout(function () {
                            //返回歌单列表
                            window.location.href = 'musiclist-list.html';
                        }, 1500);
                    } else {
                        layer.msg(resp.msg || (id ? '修改失败' : '添加失败'), {icon: 2});
                    }
                },
                error: function () {
                    layer.msg('请求失败，请稍后重试', {icon: 2});
                }
            });
        });
    });
</script>
</body>
</html>